<template>
  <div class="home">
    <div class="show-module">
      <swiper :options="swiperOption">
        <swiper-slide v-for="item in comImgBooks" :key="item.bookId">
          <a :href="'#/index/bookDetail?id='+item.bookId" :target="global.goBookDetailType" >
            <div class="swiper-div">
              <img class="swiper-img" :src="item.picUrl" alt="" >
            </div>
          </a>
        </swiper-slide>
      </swiper>
      <!-- <div class="swiper-scrollbar"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div> -->
      <div :class="['com-list', 'com-list-'+global.showType]">
        <c-com-list :books='comlistBooks1'></c-com-list>
        <c-com-list :books='comlistBooks2'></c-com-list>
        <div class="com-news">
          <p v-for="item in comNews" :key="item.id" class="com-new">
            <span class="com-new-title">[{{item.catName}}]&nbsp;</span>
              <span class="com-new-content" v-html="item.title"></span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cComList from '../components/index/home/ComList.vue'
export default {
  components:{
    cComList
  },
  data(){
    return {
      comImgBooks:[],
      comlistBooks1:[],
      comlistBooks2:[],
      comNews:[],
      imgBigUrl:require('../assets/images/default.gif'),
      swiperOption:{
          slidesPerView: 2,
          //显示分页
          // pagination: {
          //   el: '.swiper-pagination'
          // },
          //设置点击箭头
          // navigation: {
          //   nextEl: '.swiper-button-next', 
          //   prevEl: '.swiper-button-prev'
          // },
          // direction: 'vertical',
          //自动轮播
          autoplay: {
            delay: 3000,
            //当用户滑动图片后禁用自动轮播
            disableOnInteraction: false,
          },
          observer:true,//修改swiper自己或子元素时，自动初始化swiper 
          observeParents:true,//修改swiper的父元素时，自动初始化swiper 
          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
          //开启循环模式
          loop: true
      }
    }
  },
  created: function(){
    this.listBookSetting();
    this.listIndexNews();
  },
  methods: {
    listBookSetting(){
      this.$http.post('/book/listBookSetting', {}, res => {
        // console.log(res);
        // console.log(res[0]);
        this.comImgBooks = res[0];

        // this.comlistBooks = res[1];
        if(res[1]){
          if(res[1].length >= 5){
            this.comlistBooks1 = res[1].slice(0,5);
            this.comlistBooks2 = res[1].slice(5);
          }else{
            this.comlistBooks1 = res[1]
            this.comlistBooks2 = [];
          }
        }
        // this.comGoodPush = res[2];
        // this.recommendHot = res[3];
        // this.recommendGood = res[4];
      });
    },
    listIndexNews(){
      this.$http.post('/news/listIndexNews', {}, res => {
        this.comNews = res;
      });
    },
  }
}
</script>

<style lang='scss' scoped>
.home {
  // padding: 20px 15% 0 15%;
  padding-top: 20px;
  // background-color: #F5F5F5;
  // display: flex;
  // justify-content: center;
  .show-module {
    margin: 0 auto 20px auto;
    background-color: #fff;
    border-radius: 10px;
    width: 75%;
    // display: flex;
    padding: 20px;
    .swiper-div{
      width: 100%;
      text-align: center;
      .swiper-img{
        width: 140px;
        height: 200px;
      }
    }
    .com-list-mobile{
      width: 100%;
    }
    .com-list-pc{
      width: 390px;
    }
    .com-list {
      // flex: 7;
      vertical-align: top;
      display: inline-block;
      // width: 390px;
      padding-right: 10px;
      text-align: center;

      .com-news {
        text-align: left;
        .com-new {
          height: 20px;
          line-height: 20px;
          .com-new-title {
            font-size: 14px;
            // color: #888888;
            color: blue;
          }
          .com-new-content {
            overflow: hidden;
            color: blue;
          }
        }

      }
    }
  }

}
</style>
